<template>
<div>
  <div class="opt-area-02">
    <div class="left-con" style="margin-bottom: 5px">
      企业备案车辆:{{params.totalRecord}}
    </div>
    <div class="left-con">
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="司机身份证号" style="width: 164px" v-model="params.driver_cardno"/>
      </div>
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="车牌号" style="width: 164px" v-model="params.car_number"/>
      </div>
      <Button type="primary" @click="findTableList">查询</Button>
    </div>
  </div>
  <template>
    <Table border :columns="tableColumns" :data="tableData">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="getDetail(row)">详情</Button>
      </template>
    </Table>
  </template>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
          @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <Drawer width="500"  title="备案详细信息" :closable="false" v-model="detailModal">
    <Card class="detail_card">
      <p slot="title">企业信息</p>
      <Row>
        <Col offset="2" span="12">企业名称:</Col>
        <Col span="10">{{detailInfo.qy_name}}</Col>
      </Row>
<!--      <Row>-->
<!--        <Col offset="2" span="12">企业社会信用代码:</Col>-->
<!--        <Col span="10">{{detailInfo.qy_code}}</Col>-->
<!--      </Row>-->
      <Row>
        <Col offset="2" span="12">收货人:</Col>
        <Col span="10">{{detailInfo.name}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">收货人身份证号:</Col>
        <Col span="10">{{detailInfo.cardno}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">收货人联系方式:</Col>
        <Col span="10">{{detailInfo.tel}}</Col>
      </Row>
    </Card>
    <Card class="detail_card">
      <p slot="title">驾驶员信息</p>
      <Row>
        <Col offset="2" span="12">驾驶员姓名:</Col>
        <Col span="10">{{detailInfo.driver_name}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">驾驶员身份证号:</Col>
        <Col span="10">{{detailInfo.driver_cardno}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">驾驶员联系方式:</Col>
        <Col span="10">{{detailInfo.driver_tel}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">车牌号:</Col>
        <Col span="10">{{detailInfo.car_number}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">车牌颜色:</Col>
        <Col span="10">
          <span v-for="(item,index) in projectListArr" :key="index">
          <p v-show="item.value === detailInfo.chepai_color "> {{item.lable}}</p>
          </span>
        </Col>
      </Row>
      <Row>
        <Col offset="2" span="12">备案时间:</Col>
        <Col span="10">{{detailInfo.create_time}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">来锦时间:</Col>
        <Col span="10">{{detailInfo.arrive_time}}</Col>
      </Row>
      <Row>
        <Col offset="2" span="12">离锦时间:</Col>
        <Col span="10">{{detailInfo.ls_time}}</Col>
      </Row>
    </Card>
  </Drawer>
</div>
</template>

<script>
import { findQyBeiAnList } from '../../api/eventlist'
import expandRow from '../record_expand_qy/table-expand'

export default {
  name: 'index',
  components: {
    expandRow // 表格展开
  },
  data () {
    return {
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ],
      detailModal: false,
      tableColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '企业名称',
          align: 'center',
          key: 'qy_name'
        },
        {
          title: '车牌号',
          align: 'center',
          key: 'car_number'
        },
        {
          title: '驾驶员姓名',
          align: 'center',
          key: 'driver_name'
        },
        {
          title: '驾驶员身份证号',
          align: 'center',
          key: 'driver_cardno'
        },
        {
          title: '驾驶员联系方式',
          align: 'center',
          key: 'driver_tel'
        },
        {
          title: '备案时间',
          align: 'center',
          key: 'create_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        driver_cardno: '',
        car_number: ''
      },
      detailInfo: {}
    }
  },
  methods: {
    pageAction (page) {
      this.params.pageNo = page
      this.findTableList()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTableList()
    },
    findTableList () {
      let data = this.params
      console.log(data)
      findQyBeiAnList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.params.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
        }
      })
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getDetail (e) {
      this.detailInfo = e
      this.detailModal = true
    }
  },
  mounted () {
    this.findTableList()
  }
}
</script>

<style scoped>
.page_style{
  margin-top: 10px;
}
.detail_card {
  margin-bottom: 2%;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
.actionBtn {
  margin-top: 5px;
  margin-left: 5px;
}
</style>
